<template>
	<div class="ArticleCategory">
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item><i class="el-icon-lx-cascades"></i> 文章分类</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container">
			<div class="handle-box">
				<el-input v-model="select_word" placeholder="筛选关键词" class="handle-input mr10"></el-input>
				<div align="right" style="float: right;">
					<el-button type="primary" icon="search" @click="search">搜索</el-button>
					<el-button type="primary" icon="add" class="handle-del mr10" @click="add_article_category">新增</el-button>
					<!-- <el-button type="primary" icon="delete" class="handle-del mr10" @click="delAll">删除</el-button> -->
				</div>
			</div>
			<el-table :data="data" class="table" ref="multipleTable" @selection-change="handleSelectionChange">
				<el-table-column type="selection" width="55" align="center"></el-table-column>
				<el-table-column prop="icon" label="图标">
				</el-table-column>
				<el-table-column prop="title" label="标题">
				</el-table-column>
				<el-table-column prop="type" label="分类类型" :formatter="type_formatter">
				</el-table-column>
				<el-table-column prop="summary" label="摘要">
				</el-table-column>
				<el-table-column prop="content" label="内容描述">
				</el-table-column>
				<el-table-column prop="article_category_model" label="隐私类型" :formatter="article_category_model_formatter">
				</el-table-column>
				<el-table-column prop="order_number" label="排序编码">
				</el-table-column>
				<el-table-column label="操作" align="center">
					<template slot-scope="scope">
						<el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
						<el-button type="text" icon="el-icon-delete" class="red" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination background @current-change="handleCurrentChange" layout="prev, pager, next" :total="total_page"
				 :size="rows_page">
				</el-pagination>
			</div>
		</div>

		<!-- 编辑弹出框 -->
		<el-dialog title="编辑" :visible.sync="editVisible" width="30%">
			<el-form ref="articleCategoryform" :rules="rules" :model="articleCategoryform" label-width="100px">
				<el-form-item label="标题:" prop="title">
					<el-input v-model="articleCategoryform.title"></el-input>
				</el-form-item>
				<el-form-item label="分类类型:" prop="type">
					<el-radio-group v-model="articleCategoryform.type">
						<el-radio label="0">分类</el-radio>
						<el-radio label="1">分类栏目</el-radio>
						<!-- 	<el-radio label="2">专题</el-radio> -->
					</el-radio-group>
				</el-form-item>
				<el-form-item label="摘要:" prop="summary">
					<el-input v-model="articleCategoryform.summary" type="textarea" :rows="2"></el-input>
				</el-form-item>
				<el-form-item label="内容描述:" prop="content">
					<el-input v-model="articleCategoryform.content" type="textarea" :rows="2"></el-input>
				</el-form-item>
				<el-form-item label="排序编码:" prop="order_number">
					<el-input-number v-model="articleCategoryform.order_number"></el-input-number>
				</el-form-item>
				<el-form-item label="分类隐私" prop="article_category_model">
					<el-radio-group v-model="articleCategoryform.article_category_model">
						<el-radio label="1">公开</el-radio>
						<el-radio label="0">私有</el-radio>
					</el-radio-group>
				</el-form-item>

				<el-form-item label="图片">
					<el-upload :action="imgUrl" list-type="picture-card" limit="1" multiple="false" :on-preview="handlePictureCardPreview"
					 :on-remove="handleRemove" :before-upload="beforeAvatarUpload" :on-success="handleAvatarSuccess" :file-list="file_list">
						<i class="el-icon-plus"></i>
					</el-upload>
					<el-dialog :visible.sync="dialogVisible" size="tiny">
						<img width="100%" :src="dialogImageUrl" alt="">
					</el-dialog>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="editVisible = false">取 消</el-button>
				<el-button type="primary" @click="saveEdit('articleCategoryform')">确 定</el-button>
			</span>
		</el-dialog>

		<!-- 删除提示框 -->
		<el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
			<div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="delVisible = false">取 消</el-button>
				<el-button type="primary" @click="deleteRow">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
	import {
		constHelp
	} from '../../common/contant';
	import common from '../../common/common.js'
	export default {
		name: 'sys_users',
		data() {
			return {
				url: {
					get_article_category_list: constHelp['WEBAPIURL'] + '/articleCategory/get_article_category_list', // 获取文章类型列表
					insert_article_category: constHelp['WEBAPIURL'] + '/articleCategory/insert_article_category', // 添加文章类型
					update_article_category: constHelp['WEBAPIURL'] + '/articleCategory/update_article_category', // 更新文章类型
					update_delete_article_category: constHelp['WEBAPIURL'] +
						'/articleCategory/update_delete_article_category', // 逻辑删除文章类型
				},
				tableData: [],
				cur_page: 1,
				total_page: 0,
				rows_page: 10,
				multipleSelection: [],
				select_word: '',
				del_list: [],
				is_search: false,
				editVisible: false,
				delVisible: false,
				articleCategoryform: {},
				idx: -1,
				addupdateflage: 0,
				deleteflages: 0,
				deleteItem: {}, // 删除数据
				userInfo: {},
				// noteTypeId: ""

				rules: {
					title: [{
							required: true,
							message: '分类名称',
							trigger: 'blur'
						},
						{
							max: 50,
							message: '长度在50个字符',
							trigger: 'blur'
						}
					],
					type: [{
						required: true,
						message: '请选择分类类型!',
						trigger: 'change'
					}],
					summary: [{
						required: true,
						message: '请输入摘要!',
						trigger: 'blur'
					}],
					content: [{
						required: true,
						message: '请输入内容描述!',
						trigger: 'blur'
					}],
					order_number: [{
						required: true,
						message: '请输入排序!',
						trigger: 'blur'
					}],
					article_category_model: [{
						required: true,
						message: '请选择分类隐私类型!',
						trigger: 'blur'
					}]
				},
				imageUrl: '',
				dialogImageUrl: '',
				dialogVisible: false,
				imgUrl: constHelp['WEBAPIURL'] + '/blogManage/upload_icon',
				file_list: []
			}
		},
		created() {
			let userInfo_string = localStorage.getItem("UserInfo");
			if (!common.IsNull(userInfo_string)) {
				this.userInfo = JSON.parse(userInfo_string);
			}
			this.getData();
		},
		computed: {
			data() {
				return this.tableData.filter((d) => {
					// let is_del = false;
					// for (let i = 0; i < this.del_list.length; i++) {
					// 	if (d.noteTypeId === this.del_list[i].noteTypeId) {
					// 		is_del = true;
					// 		break;
					// 	}
					// }
					// if (!is_del) {
					// 	if (this.select_word === '' || (d.personalTypeName.indexOf(this.select_word) > -1 ||
					// 			d.personalTypeName.indexOf(this.select_word) > -1)) {
					return d;
					// 	}
					// }
				})
			}
		},
		methods: {
			type_formatter(row, column) {
				if (row.type == "0") {
					return "类型";
				} else if (row.type == "1") {
					return "分类栏目";
				}
				// else if (row.type == "2") {
				// 	return "专题";
				// }
			},
			article_category_model_formatter(row, column) {
				if (row.article_category_model == "0") {
					return "私有"
				} else if (row.article_category_model == "1") {
					return "公开"
				}
			},
			// 分页导航
			handleCurrentChange(val) {
				debugger
				this.cur_page = val;
				this.getData();
			},
			getData() {
				this.$axios.post(this.url.get_article_category_list, {
					page_index: this.cur_page,
					page_size: this.rows_page,
					selectWord: this.select_word,
					user_id: this.userInfo.user_Id
				}, {
					withCredentials: true
				}).then((res) => {
					if (res.data.data != null && res.data.data != "") {
						this.tableData = res.data.data;
						this.total_page = res.data.total;
					}
				})
			},
			search() {
				this.is_search = true;
			},
			formatter(row, column) {
				return row.address;
			},
			formatDate(row, column) {
				var date = new Date(row.updateTime);
				return common.formatDate(date, 'yyyy-MM-dd hh:mm');
			},
			filterTag(value, row) {
				return row.tag === value;
			},
			handleEdit(index, row) {
				this.idx = index;
				const item = this.tableData[index];
				this.articleCategoryform = item;
				this.file_list = [{
					url: item.icon
				}]
				// 编辑
				this.addupdateflage = 1;
				this.editVisible = true;
			},
			handleDelete(index, row) {
				this.idx = index;
				const item = this.tableData[index];
				this.deleteItem = item;
				this.delVisible = true;
				this.deleteflages = 1;
			},
			add_article_category() {
				this.articleCategoryform = {}
				this.file_list = []
				// 添加
				this.addupdateflage = 0;
				this.editVisible = true;
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			// 保存编辑
			saveEdit(formName) {

				this.articleCategoryform.icon = this.imageUrl
				this.$refs[formName].validate((valid) => {
					if (valid) {
						var saveUrl = this.addupdateflage == 0 ? this.url.insert_article_category : this.url.update_article_category;
						this.articleCategoryform.user_id = this.userInfo.user_Id
						this.$axios.post(saveUrl, this.articleCategoryform, {
							withCredentials: true
						}).then((res) => {
							if (this.addupdateflage == 0) {
								this.getData();
								this.editVisible = false;
								this.$message.success(`添加成功`);
							} else {
								this.getData();
								this.editVisible = false;
								this.$message.success(`修改第 ${this.idx+1} 行成功`);
							}
						}).catch((response) => {
							this.$message.success('修改失败');
						})
					} else {
						return false;
					}
				});
			}, // 确定删除
			deleteRow() {
				this.$axios.post(this.url.update_delete_article_category, this.deleteItem, {
					withCredentials: true
				}).then((res) => {
					let str = '成功删除了';
					this.tableData.splice(this.idx, 1);
					str = '删除成功';
					this.$message.success(str);
					this.delVisible = false;
					this.deleteflages = 0;
				}).catch((response) => {
					this.$message.success('删除失败');
				})
			},
			handleRemove(file, fileList) {
				console.log(file, fileList);
			},
			handlePictureCardPreview(file) {
				this.dialogImageUrl = file.url;
				this.dialogVisible = true;
			},

			beforeAvatarUpload(file) {
				const isJPG = file.type === 'image/jpeg';
				const isLt2M = file.size / 1024 / 1024 < 2;

				if (!isJPG) {
					this.$message.error('上传头像图片只能是 JPG 格式!');
				}
				if (!isLt2M) {
					this.$message.error('上传头像图片大小不能超过 2MB!');
				}
				return isJPG && isLt2M;
			},
			handleAvatarSuccess(response, file, fileList) {
				this.imageUrl = response.data.url;
			},
		}
	}
</script>

<style scoped>
	.handle-box {
		margin-bottom: 20px;
	}

	.handle-select {
		width: 120px;
	}

	.handle-input {
		width: 300px;
		display: inline-block;
	}

	.del-dialog-cnt {
		font-size: 16px;
		text-align: center
	}

	.table {
		width: 100%;
		font-size: 14px;
	}

	.red {
		color: #ff0000;
	}
</style>
